<template>
	<view class="content over-y ff-m box-b bg-f5">
		<view class="operation-box" v-if="isShow"><text @click="bindHandle(1)">编辑</text></view>
		<view class="operation-box" v-else><text @click="bindHandle(0)">完成</text></view>
		<block v-if="goodsList.length>0">
		<view class="shop-goods-plate-box" v-for="(item,index) in goodsList" :key="item.mer_id">
			<!-- 单个门店模块 -->
			<view class="shop-name-box" @click="goShopDetail(item.mer_id)">
				<radio @click.stop="bindRadio(item)" value="" color="#000" :checked="item.isTrue" style="transform: scale(0.8);" />
				<image src="../../static/cart_icon/icon2.png" mode=""></image>
				<text>{{item.mer_name}}</text>
				<image src="/static/cart_icon/icon1.png" mode="heightFix"></image>
			</view>
			<view class="goods-plate-box">
				<!-- 商品列表 -->
				<view class="store-item-box" v-for="(newItem,newIndex) in item.product" @click="goGoodsDetail(newItem.product_id)" :key="newIndex">
					<view class="sele-radio-box" @click.stop="bindNewRadio(item,newItem)">
						<radio value="" color="#000" :checked="newItem.checked" style="transform: scale(0.8);" />
					</view>
					<view class="store-logo-box">
						<image :src="newItem.image" mode=""></image>
					</view>
					<view class="store-info-box">
						<view class="store-title-box">
							<text class="ellipsis">{{newItem.store_name}}</text>
							<text>{{newItem.sku}}</text>
						</view>
						<view class="store-txt-box">
							<view class="price-box">
								￥<text>{{newItem.price}}</text>
							</view>
							<view class="add-goods-box" v-if="isShow">
								<view class="reduce-box" @click.stop="bindGoodsNum(0,newItem)">
									<image :src="newItem.cart_num==1?'/static/cart_icon/icon8.png':'/static/cart_icon/icon5.png'" mode=""></image>
								</view>
								<text class="value">{{newItem.cart_num}}</text>
								<view class="add-box" @click.stop="bindGoodsNum(1,newItem)">
									<image :src="newItem.cart_num==newItem.stock?'/static/cart_icon/icon7.png':'/static/cart_icon/icon6.png'" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</block>
		<!-- 无记录状态 -->
		<icon-status v-else :imgUrl="'../../static/cart_icon/icon4.png'" :statusInfo="'购物车是空的'"></icon-status>
		<view class="bottom-puy-box">
			<!-- bottom fixed 操作  -->
			<view class="left-sele-box" @click="bindAllChange">
				<radio-group>
					<label>
					<radio value="" color="#000" :checked="isChecked" style="transform: scale(0.8);" />
					<text>全选</text>
					</label>
				</radio-group>
			</view>
			<view class="center-price-box">
				<block v-if="isShow">
					<text>合计：</text>¥<text>{{totalPrice}}</text>.00
				</block>
			</view>
			<view class="right-but-box" @click="bindBuyOrDel(1)" v-if="isShow"><text>结算</text></view>
			<view class="right-but-box" @click="bindBuyOrDel(0)" v-else><text>删除</text></view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		components:{
			iconStatus
		},
		data() {
			return {
				isShow:true,
				isChecked:false,//全选
				totalPrice:0,//总价格
				goodsList:[],//商品列表
				cartIdArr:[],//获取商品ID
				data:{
					type:1,
					cart_id:"",
					product_id:0,
					unique:"",
					number:0,
					mer_id:0,
					change:{}
				},
			}
		},
		onLoad() {
			uni.showLoading({title:"加载中"});
		},
		onShow() {
			if (uni.getStorageSync('isLogin')) {
				this.isChecked = false;
				this.goodsList.length = 0;
				this.totalPrice = 0;
				this.getCartLst();
			}else{
				this.$showToast('请登录');
				setTimeout(function () {
				  uni.navigateTo({
				    url: '/pageMember/login/login'
				  })
				}, 1500)
			}
		},
		methods: {
			bindHandle(status){
				this.isShow = !this.isShow;
			},
			bindRadio(shop){ //选中门店radio
				let isTrue = shop.isTrue = !shop.isTrue;//是否选中单个门店checked
				let goodsList = shop.product;//门店下面的商品列表
					goodsList.forEach(g => { 
						if(isTrue){
							g.checked = isTrue;
							this.getAllPrice();
						}else {
							g.checked = isTrue;
							this.isChecked = false;
							this.totalPrice -= g.cart_num * g.price;
						}
						this.isChecked = this.goodsList.every(item=>{
							return item.isTrue&&item.product.every(items=>items.checked&&this.cartIdArr.push(items.cart_id))
						});
				});
			},
			bindNewRadio(shop,shopChilds){ //选中单个门店下的商品
				let che = shopChilds.checked = !shopChilds.checked; //是否选中单个门店下的单个商品checked
				let cheArr = shop.product.map(res => res.checked); //得到门店下商品的checked集合
				if(!che){
					shop.isTrue = false;
					this.isChecked = false;
					this.totalPrice -=  shopChilds.price * shopChilds.cart_num;
				}else if(!cheArr.includes(false)){
					shop.isTrue = true;
					this.getAllPrice();
				}else{
					this.getAllPrice();
				}
				this.isChecked = this.goodsList.every(item=>{
					return item.isTrue&&item.product.every(items=>items.checked&&this.cartIdArr.push(items.cart_id))
				});
			},			
			bindAllChange(){ //全选
				let che = this.isChecked = !this.isChecked;
					this.goodsList.forEach(item => {
						item.isTrue = che;
						item.product.map(res=>res.checked=che);
						item.product.every(items=>this.cartIdArr.push(items.cart_id));
					});
				che ? this.getAllPrice() : this.totalPrice = 0;
			},
			bindBuyOrDel(status){ //结算/删除操作
				let _this = this;
				if(Boolean(status)){
					let cartIdArr = [];
					let data = {type:2};
					 _this.goodsList.forEach(res=>{
						 res.product.map(resc => resc.checked && cartIdArr.push(resc.cart_id));
					 })
					 if(cartIdArr.length>0){
						 data.cart_id = cartIdArr.join(',');
						 console.log(data,'-----');
						 _this.$gourl(`/pageCart/orderInfo/orderInfo?data=${JSON.stringify(data)}`);
					 }else{
						 _this.$refs.uToast.show({title: '请选择商品',position:'center'});
					 }
				}else{
					if(_this.isChecked && _this.goodsList.length!=0){ //当前用户选择全选清空购物车，初始化总价格
						uni.showModal({
							title:'确定删除所有商品？',
							showCancel:true,
							confirmColor:'#000',
							success(res) {
								if(res.confirm){
								let arrId = _this.$arraytoDup(_this.cartIdArr);
								_this.delCart(arrId);
								_this.totalPrice = 0;
								_this.isChecked = false;
								}
							}
						})
					}else{
					let idArr = [];
					_this.goodsList.forEach(res=>{
						res.product.map(resc => resc.checked && idArr.push(resc.cart_id));
					})
					_this.delCart(idArr);
					}
				}
			},
			delCart(cartId){ //删除商品
				if(cartId.length){
					this.$u.api.delCartApi({cart_id:cartId.toString()}).then(res=>{
						if(res.code==1){
							this.getCartLst();
							this.totalPrice = 0;
							this.$refs.uToast.show({title: '删除成功',position:'center'});
						}
					});
				}else{
					this.$refs.uToast.show({title: '请选择商品',position:'center'});
				}

			},
			bindGoodsNum(status,goodsItem){ //增减商品数量（操作）
				console.log(status, goodsItem)
				if(Boolean(status)){
					if(goodsItem.cart_num >= goodsItem.stock){
						this.$showToast('库存不足')
						return
					}
					goodsItem.cart_num++;
					uni.showLoading({title:'计算中...',mask:true});
					this.getCartNum(goodsItem.cart_id,1);
				}else{
					if(goodsItem.cart_num==1){
						return
					}
					goodsItem.cart_num--;
					uni.showLoading({title:'计算中...',mask:true});
					this.getCartNum(goodsItem.cart_id,2);
				}
				this.getAllPrice();
			},
			getCartLst(){ //h获取购物车数据
				this.$u.api.cartLstApi({}).then(res=>{
					if(res.code==1){
						console.log('购物车：',res.data);
						res.data.forEach(resc=>{
							resc.isTrue = false;
							resc.product.forEach(childs => childs.checked = false);
						});
						this.goodsList = res.data;
					}
				});	
			},
			getCartNum(cartId,num){ //获取购物车数量
				this.$u.api.changeCartApi({
					cart_id:cartId,
					change:num,
				}).then(res=>{
					if(res.code==1){
						console.log('数量：',res);
					}
				});	
			},
			getAllPrice(){ //计算总价格
				let totalPrice = 0;
				this.goodsList.forEach(s=> {
					s.product.forEach(g=> {
						if(g.checked){
							totalPrice += g.cart_num * g.price;
							this.totalPrice = totalPrice;
						}
					});
				})
			},
			goShopDetail(merId){ //跳转门店详情
				console.log('门店ID：',merId);
				this.$gourl(`/pageIndex/storeInfo/storeDetails?merId=${merId}`);
			},
			goGoodsDetail(goodsId){ //跳转商品详情
				console.log('商品ID：',goodsId);
				this.$gourl(`/pageCart/goodsInfo/goodsInfo?goodsId=${goodsId}"`);
			}
		},
		onPullDownRefresh() {
			this.getCartLst();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;height: calc(100vh - 102rpx);
		padding-top: 70rpx;
		.operation-box{
			width: 100%;
			position: fixed;top: 0;z-index: 100;
			padding: 20rpx;
			text-align: right;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			background: #fff;
		}
		.shop-goods-plate-box{
			padding-top: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
			.shop-name-box{
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				text{padding: 0 10rpx;}
				image{width: 30rpx;height: 30rpx;vertical-align: middle;}
				image:last-child{width: 20rpx; height: 20rpx;}
			}
			.store-item-box{
				padding: 40rpx 20rpx;
				display: flex;
				border-bottom: 1rpx solid #F5F5F5;
				.sele-radio-box{
					flex: 0.09;
					display: flex;
					align-items: center;
				}
				.store-logo-box{
					flex: 0.38;
					line-height: 0;
					image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
				}
				.store-info-box{
					flex: 0.65;
					display: flex;flex-direction: column;
					.store-title-box{
						flex: 0.7;
						font-size: 30rpx;
						font-weight: bold;
						color: #212121;
						display: flex; flex-direction: column;
						text{max-width: 400rpx;}
						text:last-child{font-size: 28rpx;font-weight: 400;color: #999999;margin-top: 10rpx;}
					}
					.store-txt-box{
						flex: 0.3;
						color: #333333;
						display: flex;
						.price-box{
							flex: 0.5;
							align-self: center;
							font-weight: 400;
							font-size: 22rpx;
							font-weight: bold;
							text{font-size: 30rpx;}
						}
						.add-goods-box{
							flex: 0.5;
							align-self: center;
							display: flex;justify-content: flex-end;
							font-size: 30rpx;font-weight: 400;color: #393B42;
							line-height: 0;
							.value{width: 80rpx; height: 50rpx; line-height: 50rpx; font-size: 30rpx; text-align: center;}
							.reduce-box{image{width: 50rpx;height: 50rpx;}}
							.add-box{image{width: 50rpx;height: 50rpx;}}
						}
					}
				}
			}
		}
		.bottom-puy-box{
			width: 100%;
			position: fixed;bottom: 0;z-index: 100;
			padding: 20rpx;
			background: #fff;
			display: flex;
			font-size: 26rpx;font-weight: bold;color: #333333;
			box-shadow: 0px -2px 18px 0px rgba(0, 0, 0, 0.06);
			.left-sele-box{flex: 0.1;display: flex;flex-direction: column;}
			.actives{flex: 0.9 !important;}
			.center-price-box{
				flex: 0.8;
				align-self: center;
				font-size: 24rpx;
				text-align: right;
				text{font-size: 40rpx;}
				text:first-child{font-size: 26rpx;}
				padding-right: 20rpx;
			}
			.right-but-box{
				flex: 0.2;
				padding: 20rpx 50rpx;
				background: #000;
				border-radius: 50rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
